<template>
    <div class="shop-box">
        <div class="header">{{ $t('h.A060') }} <span style="float: right;"><van-icon @click="removeAll" name="delete-o" /></span></div>
        <div class="safe-top"/>
        <div class="shopping-main">
            <div class="main" v-if="goodsList.length === 0">
                <p class="image"> <img src="../../assets/image/gouwuche-null.png" alt=""></p>
                <p>{{ $t('h.A061') }}</p>
                <p><a class="btn" @click="$router.push({path:'/product'})" href="javascript:void (0)">{{ $t('h.A063') }}</a></p>
            </div>
            <div class="card-box">
          <template v-for="(shop,index) in goodsList">
              <div class="header-box">
                <van-checkbox icon-size="16px" v-model="shop.checked" checked-color="#f89900" @click="handleShopCheckboxClick(index)" >{{shop.shopName}}</van-checkbox>
              </div>
            <van-checkbox-group v-model="shop.checkes" @change="handleGroupChange($event,index)" :key="`shop${index}`" ref="shopGroup">
               <template v-for="(item ,idx) in shop.goods">
                   <div class="card-box-item" v-if="item.num">
                     <div class="left-box">
                       <van-checkbox :name="item" icon-size="16px" checked-color="#f89900" :key="`shop${index}#goods${idx}`" :ref="`shop${index}GoodsCheck`"></van-checkbox>
                     </div>
                     <div class="right-box">
                       <img :src="item.mainimage" alt="">
                       <div class="right">
                         <p class="title">{{item.name}} </p>
                         <p class="sku_box">
                           <!--                        {{ $t('h.A064') }}:黑色和红色-->
                         </p>
                         <p class="price">
                           <span>${{ item.price }}</span>
                           <van-stepper button-size="22px" :key="`goodsNumStepper${index}`" :min="0" v-model="item.num" @change="handleStepperChange($event,idx)"/>
                         </p>
                       </div>
                     </div>
                   </div>
               </template>
            </van-checkbox-group>

          </template>
              <div class="safe"/>
              <div class="submit-bottom">
                <span><van-checkbox icon-size="16px" :disabled="goodsList.length === 0" checked-color="#f89900" @change="toggleAll" v-model="checked">{{$t('h.SELECT_ALL')}}</van-checkbox></span>
                <div class="info-box">
                  <p>{{ $t('h.A066') }} <b>$ {{totalPrice}}</b></p>
                  <p>{{ $t('h.A067') }} <b>{{checkedNums}}</b>个</p>
                </div>
                <button @click="createOrder" :disabled="!checkedNums">{{ $t('h.A065') }}</button>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapActions} from 'vuex';
    import {Toast} from 'vant';

    export default {
        name: "index",
      data(){
          return{
            checked:false,
            value: 1,
            goodsList:[],
            checkedNums:0,
            totalPrice:0
          }
      },
      mounted() {
          this.getShopCart().then(data=>{
            this.goodsList = data
          })
      },
      methods: {
        ...mapActions(['getShopCart', 'clearShopCart','removeShopCartByIndex','updateShopCartByIndexWithKey']),
        ...mapActions('order',['setOrder']),
        handleGroupChange(values,shopIndex){
          this.$set(this.goodsList[shopIndex],'checked',!!values.length)
          this.calc();
        },
        handleShopCheckboxClick(shopIndex){
         this.$refs['shopGroup'][shopIndex].toggleAll(this.goodsList[shopIndex].checked);
          this.calc();
        },
        calc(){
          const shops = this.goodsList.filter(item => item.checked);
          let num = 0;
          let price = 0;
          shops.forEach(shop => {
            shop.checkes.forEach(g => {
              num += g.num;
              price += g.num * g.price;
            })
          })
          this.totalPrice = price.toFixed(2);
          this.checkedNums = num;
        },
        handleStepperChange(val,index){
          if(val === 0){
            this.removeShopCartByIndex(index).then(() => {
              this.getShopCart().then(data=>{
                this.goodsList = data
              })
            });
          }else{
            this.updateShopCartByIndexWithKey({
              index,
              key: 'num',
              value: val
            });
          }
          this.calc();
        },
        createOrder(){
          Toast.loading({
            message: this.$t('h.CREATING_ORDER'),
            forbidClick: true,
            duration: 0
          })
          let _goods = JSON.parse(JSON.stringify(this.goodsList.filter(item => item.checked)));
          _goods.forEach(item => {
            item.goods = item.checkes;
            item.checkes = [];
            item.checked = false;
          })

          this.setOrder(_goods).then(() => {
            Toast.clear()
            this.$router.push({
              path:'/orderChecked'
            })
          })
        },
        removeAll() {
          this.clearShopCart();
          this.goodsList = [];
        },
        toggleAll(bool) {
          for (let i = 0; i < this.$refs['shopGroup'].length; i++) {
            this.$refs['shopGroup'][i].toggleAll(bool);
          }
        }
      }
    }
</script>

<style scoped lang="scss">
    .shop-box{
        width: 100%;
        box-sizing: border-box;
        min-height: 100vh;
        background: #f5f5f7;
        .header {
            position: fixed;
            top: 0;
            z-index: 999;
          padding: 0 3%;
          box-sizing: border-box;
            background: #fff;
            height: 45px;
            width: 100%;
            text-align: center;
            line-height: 45px;
            margin: 0 auto;
            color: #323233;
            font-weight: 500;
            font-size: 14px;
        }
        .safe-top{
            height: 45px;
            width: 100%;
        }
        .shopping-main{
            width: 100%;
            min-height: 80vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            .main{
                width: 150px;
                .image{
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    height: 100px;
                }
                img{
                    height: 100px;
                }
                p{
                    text-align: center;
                    font-size: 14px;
                    height: 40px;
                    display: flex;
                    justify-content: center;
                }
                .btn{
                    width: 100px;
                    height: 40px;
                    background: #f79804;
                    border-radius: 5px;
                    color: #fff;
                    font-size: 14px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }


        }
        .card-box{
          width: 100%;
          height: 80vh;
          overflow-y: scroll;
          padding: 3%;
          box-sizing: border-box;
          .header-box{
            width: 100%;
            height: 30px;
            font-size: 14px;
            padding: 0 0 0 20px;
            box-sizing: border-box;
          }
          .card-box-item{
            width: 100%;
            height: 110px;
            background: #fff;
            margin-bottom: 20px;
            display: flex;
            padding: 3% 0;
            .left-box{
              width: 40px;
              height: 100px;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .right-box{
              width: 100%;
              height: 100px;
              display: flex;
              align-items: center;
              img{
                width: 60px;
                height: 60px;
              }
              .right{
                width: 100%;
                height: 100px;
                padding: 3%;
                box-sizing: border-box;
                .title{
                  width: 100%;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -moz-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  font-size: 14px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
                .sku_box{
                  height: 20px;
                  margin-bottom: 10px;
                  font-size: 12px;
                  width: 100%;
                }
                .price{
                  width: 100%;
                  height: 30px;
                  display: flex;
                  justify-content: space-between;
                  span{
                    color: #f89220;
                    font-size: 14px;
                  }
                }
              }
            }
          }
          .safe{
            height: 110px;
            width: 100%;
          }
          .submit-bottom{
            height: 60px;
            background: #fff;
            position: fixed;
            bottom: 65px;
            left: 0;
            width: 100%;
            font-size: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 3%;
            box-sizing: border-box;
            span{
              font-size: 16px;
              b{
                color: #002FFF;
              }
            }
            .info-box{
              p:nth-child(1){
                font-size: 14px;
                b{
                  color: #f89220;
                  font-size: 16px;
                }
              }
              p:nth-child(2){
                font-size: 14px;
                b{
                  color: #f89220;
                  font-size: 16px;
                  margin: 0 5px;
                }
              }
            }
            button{
              width: 100px;
              height: 40px;
              border: none;
              background: #f89220;
              color: #fff;
              font-size: 14px;
              border-radius: 5px;
            }
          }
      }
    }
</style>
